<template>
  <div class="app-container">
    <div style="padding: 15px;margin-bottom:20px;background: #409EFF;color: white">{{form.checkStatus.text+(form.checkStatus.value=='failed'?'：'+form.remark:'')}}</div>
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-form-item label="楼盘名称：" prop="name">
        <el-input type="text" style="width: 400px" v-model="form.name" maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="楼盘封面：" prop="cover">
        <uploadimg :showFilelist="false" @setImg="setImg" :dialogImageUrl="form.cover"/>
        <span style="color: #999999">建议352x460高宽尺寸，2M以内</span>
      </el-form-item>
      <el-form-item label="是否在售：">
        <el-checkbox v-model="form.onSale">是</el-checkbox>
      </el-form-item>
      <el-form-item label="支持预约：">
        <el-checkbox v-model="form.dating">开启</el-checkbox>
      </el-form-item>
      <el-form-item label="诚意金(单位元,选填)：" prop="sincer">
        <el-input type="number" style="width: 150px" v-model="form.sincer"/>
        <div style="color: rgba(1,1,1,0.5)">不填写或填0代表不支持诚意金</div>
      </el-form-item>
      <el-form-item label="缴纳起始时间：" v-if="form.sincer>0" prop="sincerStartTime">
        <el-date-picker
          v-model="time1"
          type="date"
          @change="(val)=>{timeChange('sincerStartTime',val)}"
          :clearable="false"
          :editable="false"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="缴纳结束时间：" v-if="form.sincer>0" prop="sincerEndTime">
        <el-date-picker
          v-model="time2"
          type="date"
          @change="(val)=>{timeChange('sincerEndTime',val)}"
          :clearable="false"
          :editable="false"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="解冻时间：" v-if="form.sincer>0">
        <el-date-picker
          v-model="time3"
          type="date"
          @change="(val)=>{timeChange('sincerThawTime',val)}"
          :clearable="false"
          :editable="false"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="标签：" prop="tags">
        <div v-for="(item,index) in form.tags" style="margin-bottom: 10px">
          <el-input style="width: 150px" type="text" v-model="form.tags[index]" maxlength="4" show-word-limit/>
          <a style="color: red" @click="form.tags.splice(index,1)"> 删除</a><br/>
        </div>
        <a style="color: #409EFF" v-if="form.tags.length<5" @click="form.tags.push('')">添加</a>
      </el-form-item>
      <el-form-item label="楼盘简介：" prop="description">
        <el-input v-model="form.description" style="width: 400px" :autosize="{minRows:5}" type="textarea" maxlength="300" show-word-limit/>
      </el-form-item>
      <el-form-item label="均价(单位元)：" prop="price">
        <el-input v-model="form.price" style="width: 150px"  type="number"/>
      </el-form-item>
      <el-form-item label="总价(单位万元)：" prop="totalPrice">
        <el-input v-model="form.totalPrice" style="width: 150px" type="number"/>
      </el-form-item>
      <el-form-item label="建面（单位㎡)：" prop="area">
        <el-input v-model="form.area" style="width: 400px" placeholder="输入户型面积区间，如90-120"/>
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="住宅">住宅</el-radio>
          <el-radio label="商铺">商铺</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="户型文字：" prop="houseTypeText">
        <el-input type="text" placeholder="如3/4居，需和添加的户型保持一致" style="width: 400px" v-model="form.houseTypeText" maxlength="15" show-word-limit/>
      </el-form-item>
      <el-form-item label="添加户型：" prop="houseTypes">
        <div v-for="item,index in form.houseTypes" style="margin-bottom: 10px">
          <el-input style="width: 300px"  placeholder="请输入户型名称" type="text" v-model="form.houseTypes[index].name" maxlength="10" show-word-limit>
          </el-input>
          <el-input style="width: 160px"  placeholder="户型面积" type="number" v-model="form.houseTypes[index].area">
            <template slot="append">㎡</template>
          </el-input>
          <a style="color: red" @click="form.houseTypes.splice(index,1)"> 删除</a><br/>
        </div>
        <a style="color: #409EFF" @click="form.houseTypes.push({name:'',area:''})">添加</a>
      </el-form-item>
      <el-form-item label="结构：" prop="structure">
        <el-input type="text" style="width: 400px" v-model="form.structure" maxlength="15" show-word-limit/>
      </el-form-item>
      <el-form-item label="开盘时间：" prop="openTime">
        <el-date-picker
          v-model="time"
          type="date"
          @change="(val)=>{timeChange('openTime',val)}"
          :clearable="false"
          :editable="false"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="楼盘地址：" prop="address">
        <a style="color: #409EFF" @click="showMap(1)">选择地址</a><br>
        <el-input v-model="form.address" :disabled="!form.latitude" placeholder="暂无地址坐标，请点击选择地址后才可编辑" style="width: 400px"  maxlength="100" show-word-limit/>
      </el-form-item>
      <el-form-item label="售楼处地址：" prop="saleAddress">
        <a style="color: #409EFF" @click="showMap(2)">选择地址</a><br>
        <el-input v-model="form.saleAddress" :disabled="!form.saleLatitude" placeholder="暂无地址坐标，请点击选择地址后才可编辑" style="width: 400px"  maxlength="100" show-word-limit/>
      </el-form-item>

      <el-form-item label="产权年限（年)：" prop="rightYear">
        <el-input type="number" style="width: 150px" v-model="form.rightYear"/>
      </el-form-item>
      <el-form-item label="装修标准：" prop="decorationStandard">
        <el-input type="text" style="width: 400px" v-model="form.decorationStandard" maxlength="10" show-word-limit/>
      </el-form-item>
      <el-form-item label="物业费（单位元/㎡/月）：" prop="propertyCost">
        <el-input type="number" style="width: 150px" v-model="form.propertyCost"/>
      </el-form-item>
      <el-form-item label="物业公司：" prop="propertyCompany">
        <el-input style="width: 400px" v-model="form.propertyCompany" maxlength="50" show-word-limit/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
    <qqmap v-if="dialogMapVisible>0" @changeVisible="showMap" @setLoaction="setLoaction" :latitude="latitude" :longitude="longitude" :address="address" :dialogMapVisible="dialogMapVisible"/>
  </div>
</template>

<script>
  import uploadimg from '@/components/UploadImg/index.vue'
  import qqmap from "@/components/qqmap/index";
  import { edit} from '@/api/building';
  export default {
  props: {
    form: {
      type: Object,
      default: {}
    },
  },
    watch:{
      form(){
        this.time=this.form.time
        this.time1=this.form.time1
        this.time2=this.form.time2
        this.time3=this.form.time3
      }
    },
  data() {
    const validateTags = (rule, value, callback) => {
      if (value.length) {
        for(let i=0;i<value.length;i++){
          if(!value[i]){
            callback(new Error('请输入标签'))
            return
          }
        }
        callback()
      }else{
        callback(new Error('请至少添加一个标签'))
      }
    }
    const validateSincer = (rule, value, callback) => {
      if (value<0) {
        callback(new Error('诚意金不能小于0'))
      }else{
        callback()
      }
    }
    const validateStartTime = (rule, value, callback) => {
      if (!this.time1) {
        callback(new Error('请选择缴纳起始时间'))
      }else{
        callback()
      }
    }
    const validateEndTime = (rule, value, callback) => {
      if (!this.time2) {
        callback(new Error('请选择缴纳结束时间'))
      }else{
        callback()
      }
    }
    const validateThawTime = (rule, value, callback) => {
      console.log(new Date(this.time2).getTime()<new Date(this.time3).getTime())
      if (!this.time3) {
        callback(new Error('请选择解冻时间'))
      }else if (!this.time2) {
        callback(new Error('请先选择缴纳结束时间'))
      }else if(new Date(this.time2).getTime()>new Date(this.time3).getTime()){
        callback(new Error('解冻时间只能等于或晚于缴纳结束时间'))
      }else{
        callback()
      }
    }
    const validateHouseTypes = (rule, value, callback) => {
      if (value.length) {
        for(let i=0;i<value.length;i++){
          if(!value[i].name||!value[i].area){
            callback(new Error('请输入户型'))
            return
          }
        }
        callback()
      }else{
        callback(new Error('请至少添加一个户型'))
      }
    }
    const validateOpenTime = (rule, value, callback) => {
      if (value<1) {
        callback(new Error('请选择开盘时间'))
      } else {
        callback()
      }
    }
    return {
      loading:false,
      dialogMapVisible:0,
      latitude:'',
      longitude:'',
      address:'',
      time:this.form.time,
      time1:this.form.time1,
      time2:this.form.time2,
      time3:this.form.time3,
      rules:{
        name: [
          { required: true, message: '请输入楼盘名称', trigger: 'blur' },
        ],
        cover: [
          { required: true, message: '请上传楼盘封面', trigger: 'blur' },
        ],
        sincer: [
          { required: true, trigger: 'blur', validator: validateSincer}
        ],
        sincerStartTime:[
          { required: true, trigger: 'blur', validator: validateStartTime}
        ],
        sincerEndTime:[
          { required: true, trigger: 'blur', validator: validateEndTime}
        ],
        sincerThawTime:[
          { required: true, trigger: 'blur', validator: validateThawTime}
        ],
        tags: [{ required: true, trigger: 'blur', validator: validateTags }],
        description: [
          { required: true, message: '请输入楼盘简介', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入均价', trigger: 'blur' },
        ],
        totalPrice: [
          { required: true, message: '请输入总价', trigger: 'blur' },
        ],
        area: [
          { required: true, message: '请输入建面', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'blur' },
        ],
        houseTypeText: [
          { required: true, message: '请输入户型文字', trigger: 'blur' },
        ],
        structure: [
          { required: true, message: '请输入结构', trigger: 'blur' },
        ],
        houseTypes: [{ required: true, trigger: 'blur', validator: validateHouseTypes }],
        openTime:  [{ required: true, trigger: 'blur', validator: validateOpenTime }],
        address: [
          { required: true, message: '请选择楼盘地址', trigger: 'blur' },
        ],
        saleAddress: [
          { required: true, message: '请选择售楼处地址', trigger: 'blur' },
        ],
        rightYear: [
          { required: true, message: '请输入产权年限', trigger: 'blur' },
        ],
        decorationStandard: [
          { required: true, message: '请输入装修标准', trigger: 'blur' },
        ],
        propertyCost: [
          { required: true, message: '请输入物业费', trigger: 'blur' },
        ],
        propertyCompany: [
          { required: true, message: '请输入物业公司', trigger: 'blur' },
        ],
      }
    }
  },
  components:{
    uploadimg,
    qqmap
  },
  methods: {
    setImg(url){
      this.form.cover=url
    },
    timeChange(key,val){
      console.log(key,val)
      this.form[key]=val.getTime()/1000
      this.$forceUpdate()
    },
    showMap(num){
      this.dialogMapVisible=num
      this.address=''
      this.latitude=''
      this.longitude=''
      if(num==1){
        this.address=this.form.address
        this.latitude=this.form.latitude
        this.longitude=this.form.longitude
      }else if(num==2){
        this.address=this.form.saleAddress
        this.latitude=this.form.saleLatitude
        this.longitude=this.form.saleLongitude
      }
    },
    setLoaction(data){
      console.log(data)
        if(data){
          if(this.dialogMapVisible==1){
            this.form.address=data.address
            this.form.latitude=data.lat
            this.form.longitude=data.lng
          }else{
            this.form.saleAddress=data.address
            this.form.saleLatitude=data.lat
            this.form.saleLongitude=data.lng
          }
          this.dialogMapVisible=0
        }else{
          this.$message.error('请选择地址')
        }
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.$emit('basicSub')
          this.$confirm('确认提交？')
            .then(_ => {
              this.loading=true
              edit(this.form).then(res=>{
                this.$message.success('提交成功')
              }).finally(
                this.loading=false
              )
            })
            .catch(_ => {});
        }
      });
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  },
  }
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

